@import '../common/index.less';

@collapse-header-text-color: var(--td-collapse-header-text-color, @text-color-primary);
@collapse-content-text-color: var(--td-collapse-content-text-color, @text-color-primary);
@collapse-header-text-disabled-color: var(--td-collapse-header-text-disabled-color, @text-color-disabled);

// font-size
@collapse-title-font-size: var(--td-collapse-title-font-size, @font-size-m);
@collapse-extra-font-size: var(--td-collapse-extra-font-size, @font-size-m);
@collapse-content-font-size: var(--td-collapse-content-font-size, @font-size-base);

@collapse-header-height: var(--td-collapse-header-height, 96rpx);
@collapse-horizontal-padding: var(--td-collapse-horizontal-padding, 32rpx);
@collapse-content-padding: var(--td-collapse-content-padding, 32rpx);
@collapse-content-line-height: var(--td-collapse-content-line-height, 1.5);
@collapse-border-color: var(--td-collapse-border-color, @border-level-1-color);

@collapse-panel-bg-color: var(--td-collapse-panel-bg-color, @bg-color-container);

.@{prefix}-collapse-panel {
  .border(bottom, @collapse-border-color);
  background-color: @collapse-panel-bg-color;

  &--disabled {
    pointer-events: none;

    .@{prefix}-collapse-panel__content,
    .@{prefix}-collapse-panel__header {
      opacity: 0.3;
    }
  }

  &--top {
    display: flex;
    flex-direction: column-reverse;
  }

  &__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: @collapse-horizontal-padding;
    height: @collapse-header-height;
    color: @collapse-header-text-color;

    &--top {
      .border(top, @collapse-border-color);
    }

    &--bottom {
      .border(bottom, @collapse-border-color);
    }

    &:after {
      display: none;
      left: 32rpx;
    }

    &--expanded {
      &:after {
        display: block;
      }
    }

    &-right {
      display: inline-flex;
      align-items: center;
      height: 100%;
    }

    &-icon {
      // 增大热区
      height: 100%;
      padding-left: 8px;
      width: 44px;
      padding-right: 8px;
      color: var(--td-collapse-icon-color, @font-gray-3);
    }
  }

  &__extra {
    font-size: @collapse-extra-font-size;
  }

  &__body {
    .border(bottom, @collapse-border-color);
  }

  &__wrapper {
    height: 0;
    overflow: hidden;
  }

  &__content {
    color: @collapse-content-text-color;
    font-size: @collapse-content-font-size;
    padding: @collapse-content-padding;
    line-height: @collapse-content-line-height;
  }

  &__arrow--top {
    transform: rotate(180deg);
  }
}

.class {
  &-title {
    font-size: @collapse-title-font-size;

    &--disabled {
      color: @text-color-disabled;
    }
  }

  &-note {
    &--disabled {
      color: @text-color-disabled;
    }
  }

  &-right-icon {
    &--disabled {
      color: @text-color-disabled;
    }
  }
}
